<template>
  <div class="stats-table-box">
    <el-table :data="areaData" style="width: 100%" header-row-class-name="stats-table-hr" row-class-name='stats-table-row' max-height="475">
    	<el-table-column v-for='(item,i) in table.columns' :key='i' :prop='item.prop' :label='item.label' 
        :width='item.width' :min-width='item.minWidth' :fixed='item.fixed' :formatter="item.formatter" 
      ></el-table-column>
      <el-table-column label='操作' width="100" fixed="right" align="center">
        <template slot-scope="scope">
          <div class="stats-action-btn" v-if="scope.row.areaIsPoint" @click="NavToPoint(scope.row)">查看考点</div>
          <div style="color: lightgray;" v-if="!scope.row.areaIsPoint">非考点</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>


export default {
  props: ['areaData'],
  components: {},
  data () {
    return {
      title: '已抽座位号',
      table: { data: [], columns: [], sort: [] },
    }
  },
  mounted ()  {
    this.table.columns = [
      { prop: 'areaName', label: '学校名字', width: 200, fixed: 'left'},
      { prop: 'areaCode', label: '编号', width: 100},
      { prop: 'confirmedStuNum', label: '报名人数', width: 100},
      { prop: 'waitingStuNum', label: '未考', width: 100},
      { prop: 'missedStuNum', label: '缺考', width: 100},
      { prop: 'havingExamStuNum', label: '考试中', width: 100},
      { prop: 'finishedByNormalStuNum', label: '已完成', width: 100},
      { prop: 'finishedByResitStuNum', label: '补考已完成', width: 100},
      { prop: 'notFinishedByResitStuNum', label: '补考未完成', width: 100},
    ]
  },
  methods: {
    NavToPoint(point){
      sessionStorage.setItem('statsCurrentPoint', point.areaName)
      this.$router.push({ name: 'statsPoint' })
    },
    formatterFn (row, column, cellValue, index) {
      return typeof(cellValue) === 'boolean' ? cellValue.toString() : cellValue
    },
    autoSetTableColumns(){
      this.table.columns = []
      for(let k in this.areaData[0]){
        console.log(k, typeof(this.areaData[0][k]))
        if(typeof(this.areaData[0][k]) !== 'object'){
          this.table.columns.push({prop:k, label: k,width: 220 , formatter:this.formatterFn })
        }
      }
    }
  },
  computed: {}
}
</script>

<style>
.stats-table-hr th{
  background: #2d367d;
  color: white;
  border: 1px solid #ddd;
}
</style>
